<!-- <ma-crumb>
  <ma-crumb-item ma-href="#!/components">Components 组件</ma-crumb-item>
  <ma-crumb-item ma-href="#!/components/global">Global 全局</ma-crumb-item>
  <ma-crumb-item>Font 文字</ma-crumb-item>
</ma-crumb> -->
<ma-crumb-auto></ma-crumb-auto>
<div class="navigation-tabs-page">
  <div class="container"
    ma-full-container>
    <h2>Tabs 标签页</h2>
    <p>选项卡切换组件。</p>

    <h3>代码演示</h3>
    ${require('./code.html')}
    <div class="p">
      <ma-code>
        <div class="right">
          <a href="https://jsfiddle.net/youpinyao/deh99sjc/"
            target="_blank">jsfiddle</a>
        </div>

        <code ng-bind="codeText"></code>
      </ma-code>
    </div>
    <h3>API</h3>
    <h3>ma-tabs</h3>
    <div class="p">
      <table>
        <tr>
          <th>属性</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
        <tr>
          <td>ng-model</td>
          <td>双向绑定数据</td>
          <td>String</td>
          <td>-</td>
        </tr>
      </table>
    </div>
    <h3>ma-tab, ma-tab-button</h3>
    <div class="p">
      <table>
        <tr>
          <th>属性</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
        <tr>
          <td>ma-value</td>
          <td>设定对应 tab 所对应的值</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>ma-size</td>
          <td>large default small（ma-tab-button 独有）</td>
          <td>String</td>
          <td>-</td>
        </tr>
      </table>
    </div>
  </div>
</div>
